<template>
  <div>
    <div>
      <!-- <h3 style="margin-bottom: 0vw; color: balck">Guess You Like It</h3> -->
      <h3>猜你喜欢</h3>
    </div>
    <div class="pic">
      <div>
        <a :href="'/westernDetail?lid=' + num1">
          <img v-src="pic.img1" alt=""
        /><div class="desc1">{{ pic.explains }}</div></a>
        
      </div>
      <div>
        <a :href="'/westernDetail?lid=' + num2">
          <img v-src="pic1.img1" alt=""
        /> <div class="desc1">{{ pic1.explains }}</div></a>
       
      </div>
      <div>
        <a :href="'/westernDetail?lid=' + num3">
          <img v-src="pic2.img1" alt=""
        /> <div class="desc1">{{ pic2.explains }}</div></a>
       
      </div>
      <div>
        <a :href="'/westernDetail?lid=' + num4">
          <img v-src="pic3.img1" alt=""
        /><div class="desc1">{{ pic3.explains }}</div></a>
        
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pic: {},
      pic1: {},
      pic2: {},
      pic3: {},
      num1: "",
      num2: "",
      num3: "",
      num4: "",
    };
  },
  mounted() {
    // 轮播图及介绍
    this.num1 = parseInt(Math.random() * 7);
    // console.log("num", this.num1);
    this.num2 = parseInt(Math.random() * (14 - 7) + 7);
    this.num3 = parseInt(Math.random() * (21 - 14) + 14);
    this.num4 = parseInt(Math.random() * (30 - 21) + 21);
    this.axios.get("/img_detail").then((res) => {
      this.pic = res.data.results[this.num1];
      // console.log("pic111111", this.pic.img1);
      this.pic1 = res.data.results[this.num2];
      this.pic2 = res.data.results[this.num3];
      this.pic3 = res.data.results[this.num4];
    });
  },
};
</script>

<style>
h3 {
  font-family: cursive;
  font-size: 7vw;
  letter-spacing: 0.35rem;
  color: #444;
  text-align: center;
  margin-top: 30px;
}
.pic img {
  display: block;
  width: 42vw;
  height: 54vw;
  margin-left: 5.4vw;
  margin-bottom: 20px;
  margin-top: 20px;
}
.pic {
  border: 0;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.pic .desc1 {
  font-size: 5vw;
  font-family: cursive;
  margin: 1px 19px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 38vw;
}
</style>
